<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .txl {
            float: left;
            margin-top: 100px;
        }

        .txl ul h4 {
            height: 50px;
            width: 200px;
            text-align: center;
            line-height: 50px;
            background-color: rgb(255, 250, 232);
        }
        .txl ul:last-child h4{
            border: none;
        }
        .txl ul {
            overflow: hidden;
            
        }

        .txl ul li {
            height: 0px;
            line-height: 34px;
            background-color: #FBF0D2;
            transition: all .7s ease 0s;
        }
        .txl ul li:hover{
            background-color: #605c506b;
        }
        .txlmain {
            position: absolute;
            top: 100px;
            left: 500px;
            width: 2000px;
            display: flex;
            flex-direction: column;
        }
        .txlmain ol li {
            float: left;
            border-bottom: 1px solid black;
            line-height: 100px;
            font-size: 20px;
            font-weight: 700;
            padding-left: 30px;
        }
        .cx{
            position: absolute;
            left: 5px;
            top: 50px;
        }
    </style>
</head>
<!-- <form action="">
    <select id="zu"></select>
    <select id="xm"></select>
</form> -->

<body>
<div class="cx">
    <input type="text">
<button>查询</button>
</div>

    <div class="txl">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <div class="txlmain">
    </div>
    <script>
    function xuanran(i){
                var txlmain = document.querySelector('.txlmain');
                txlmain.innerHTML += `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`;
                   
        }
        var input=document.querySelector('input')
var txlbox=document.querySelector('.txlbox')
var btn =document.querySelector('button')
btn.addEventListener('click',function(){

    var txlmain = document.querySelector('.txlmain');
    txlmain.innerHTML=''
    for(let i=0;i<data.length;i++){
    if(input.value==data[i].name){   
        xuanran(i);
    }else if(input.value==data[i].age){      
        xuanran(i);
    }else if(input.value==data[i].sex){
        xuanran(i);
    }else if(input.value==data[i].fenzu){
        xuanran(i);
    }
    else if(input.value==data[i].phone){
        xuanran(i);
    }
}
})
var uls = document.querySelectorAll('ul')
        console.log(data);
        var str1 = ''
        var str2 = ''
        var str3 = ''
        var str4 = ''
        var str5 = ''
        var str6 = ''
        var str7 = ''
        for (let i = 0; i < data.length; i++) {
            if (data[i].fenzu == '第一组') {
                str1 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第二组') {
                str2 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第三组') {
                str3 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第四组') {
                str4 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第五组') {
                str5 += `<li>${data[i].name}</li>`
            } else if (data[i].fenzu == '第六组') {
                str6 += `<li>${data[i].name}</li>`
            }
        }
        uls[0].innerHTML = '<h4>第一组</h4>' + str1
        uls[1].innerHTML = '<h4>第二组</h4>' + str2
        uls[2].innerHTML = '<h4>第三组</h4>' + str3
        uls[3].innerHTML = '<h4>第四组</h4>' + str4
        uls[4].innerHTML = '<h4>第五组</h4>' + str5
        uls[5].innerHTML = '<h4>第六组</h4>' + str6
        var h4s = document.querySelectorAll('h4');
        var ullis = document.querySelectorAll('ul>li');
        for (let i = 0; i < h4s.length; i++) {
            h4s[i].onclick = function () {
                var lis = uls[i].querySelectorAll('li')
                var num = lis.length;
                for (let k = 0; k < ullis.length; k++) { // 点击前清除所有li 的高度
                    ullis[k].style.height = '0px';
                }
                for (let j = 0; j < num; j++) {
                    lis[j].style.height = '34px';
                }
            }
        }
        for (let i = 0; i < ullis.length; i++) {
            ullis[i].onclick = function () {
                var txlmain = document.querySelector('.txlmain');
                txlmain.innerHTML =
                    `<ol>
            <li>姓名：${data[i].name}</li>
            <li>年龄：${data[i].age}</li>
            <li>性别：${data[i].sex}</li>
            <li>手机号：${data[i].phone}</li>
            <li>描述：${data[i].dis}</li>
            <li>分组：${data[i].fenzu}</li>
        </ol>`
            }
        }
    </script>
</body>

</html>